<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Demo: Creating A Sliding Image Puzzle</title>
 
	<script type="text/javascript" src="jquery/jquery-1.6.4.js"></script>
	<script type="text/javascript" src="jquery/jquery-puzzle.js"></script> 
	<script type="text/javascript">
 
		// When the document is ready, hook up the puzzle
		// functionality to the targeted DIVs.
		$(
			function(){
				$( "div.puzzle, p" ).puzzle( 65 );
			}
			
			
			
			
			
			
			
			
		);
		
		
		
	function processAjax(yourimportedString) { 
		url = "queries.php?string=" + yourimportedString 
		if (window.XMLHttpRequest) { // Non-IE browsers 
			req = new XMLHttpRequest(); 
			req.onreadystatechange = targetDiv; 
			try { 
				req.open("GET", url, true); 
			} catch (e) { 
				alert(e); 
			} 
			req.send(null); 
		} else if (window.ActiveXObject) { // IE 
			req = new ActiveXObject("Microsoft.XMLHTTP"); 
			if (req) { 
				req.onreadystatechange = targetDiv; 
				req.open("GET", url, true); 
				req.send(); 
			} 
		} 
	} 

	function targetDiv() { 
		if (req.readyState == 4) { // Complete 
			if (req.status == 200) { // OK response 
				document.getElementById("MyDivName").innerHTML = req.responseText; 
			} else { 
				alert("Problem: " + req.statusText); 
			} 
		} 
	} 
		
		
		
		
 
	</script>
</head>
<body>
 
	
 
	<!--- First Puzzle. --->
	<div
		class="puzzle"
		style="float: left ; margin-right: 50px ;">
 
		<img
			src="./img/chef.jpg"
			width="650"
			height="650"
			alt="Puzzle Girl One"
			/>
			
		<button 
 
	</div>
	<br />
	<br />
	<br />
	
	<a href="javascript:processAjax('foo');">CLICK ME</a> 
	<div id="myDivName"></div> 	
	
	
 
</body>
</html>